<template>
  <div>
    <span class="text-light-gray">{{tips}}</span>

    <!-- user panel -->
    <div class="box with-border hover-shadow" style="margin-bottom: 5px; min-height: 148px;">
      <div class="box-header with-padding">
        <span>已选中用户（限定 {{ limit }} 人）：</span>
        <el-button class="pull-right" @click="cleanup" type="text">清除已选</el-button>
      </div>
      <div class="box-body with-padding">
        <transition name="el-zoom-in-center">
          <div v-if="value.length === 0" class="text-warning">还未选中用户！</div>
        </transition>
        <el-tag v-for="(item, idx) in value" :key="idx" @close="remove(item)"
                size="small" closable type="plain">{{ item.username }}
        </el-tag>
      </div>
    </div>

    <!-- user list -->
    <div class="box with-border hover-shadow">
      <sea-data-table ref="tableObject" url="/sys/user/page" @row-click="rowClick">
        <!--表头-->
        <sea-simple-header slot="header" hidden-button>
          <template slot="input">
            <el-form-item prop="keyword" for="keyword" class="no-margin">
              <el-input v-model="form_data.keyword" placeholder="请输入内容" style="width: 200px;" size="small">
                <el-button slot="append" icon="fa fa-search"></el-button>
              </el-input>
            </el-form-item>
          </template>
        </sea-simple-header>

        <!--表头-->
        <template slot="columns">
          <el-table-column property="deptName" label="部门"></el-table-column>
          <el-table-column property="username" label="用户"></el-table-column>
        </template>
      </sea-data-table>
    </div>
  </div>
</template>

<script>

/**
 * 屏幕变化引起的变化事件
 */
export default {
    name: "user-select",
    props: {
        // 操作成功
        limit: {type: [Number, String], default: 1}
        // 包含 name 与 id 即可，组件内部不会自动补充数据
        , value: {type: Array, default: Layers.array}
        // 简短的操作提示
        , tips: {type: String, default: ''}
    }, model: {
        //需要定义哪一个props可以用v-model绑定属性
        prop: 'value',
        //声明一个事件，调用之后，就会改变父级容器的值
        event: 'handlerValueChange'
    },
    data() {
        return {
            form_data: {
                keyword: undefined
            }
        }
    },
    methods: {
        /**
         * 行点击事件
         * @param row -
         */
        rowClick: function (row) {
            if (this.limit === 1) {
                this.$set(this.value, 0, row);
                this.onChange();
            } else {
                const arr = this.value;
                if (this.value.length < this.limit) {
                    for (let i = 0; i < arr.length; i++) {
                        if (arr[i].id === row.id) {
                            return;
                        }
                    }
                    this.value.push(row);
                    this.onChange();
                } else {
                    Layers.warn('只需要选中 ' + this.limit + ' 个人！');
                }
            }
        }
        /**
         * 移除一个用户
         * @param row -
         */
        , remove: function (row) {
            const arr = this.value;
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].id === row.id) {
                    this.value.splice(i, 1);
                    this.onChange();
                    break;
                }
            }
        }
        /**
         * 清除所有用户
         */
        , cleanup: function () {
            this.value.splice(0, this.value.length);
            this.onChange();
        }
        /**
         * 数据发生变化
         */
        , onChange: function () {
            this.$emit('change', this.value);
            this.$emit('handlerValueChange', this.value);
        }
    }
};
</script>

